<template>
	<div class="video-player-card" v-if="videoUrl">
		<video id="videoPlayerStart" class="video" autoplay preload="auto" ref="videoPlayerStart" @ended="showReplayButton">
			<source :src="videoUrl" type="video/mp4">
		</video>

		<!-- 重播按钮 -->
		<button v-show="canReplay" @click="replayVideo" class="play-button">重播</button>
	</div>
</template>

<script>
	export default {
		props: {
			videoUrl: String,
			pictureSrc: String
		},
		data() {
			return {
				canReplay: false, // 控制重播按钮的显示
			};
		},
		methods: {
			showReplayButton() {
				this.canReplay = true; // 视频结束时显示重播按钮
			},
			replayVideo() {
				this.$refs.videoPlayerStart.currentTime = 0; // 将视频时间重置为0
				this.$refs.videoPlayerStart.play(); // 播放视频
				this.canReplay = false; // 隐藏重播按钮
			}
		}
	};
</script>


<style>
	.video-player-card {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video {
		max-height: 300px;
		max-width: 400px;
		width: auto;
		height: auto;
	}

	.play-button {
		position: absolute;
		right: 10px;
		bottom: 0px;
		padding: 5px 10px;
		background-color: lightgrey;
		color: black;
		border: none;
		border-radius: 8px;
		cursor: pointer;
	}

	.play-button:hover {
		background-color: grey;
		color: #fff;
	}
</style>